<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的垂直布局</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
        /* 
            兄弟元素同时设置了一个方向的外边距的时候会产生外边距重叠
            这个现象对开发及其有利

            特殊情况：
            1.两个值都为正数，谁大选择谁
            2.两个值都为负数，谁绝对值大听谁
            3.一正一负，取和
        */
        .brother1{
            margin-bottom: 30px;
        }
        .brother2{
            margin-top: 30px;
            margin-bottom: 10px;
        }

        /* 
            父子级垂直布局子元素设置顶部外边距的时候会出现外边距传递的问题
            这个问题对开发非常不利，需要解决。
            原因：
            子元素和父元素的边缘贴合在了一起。
            解决方法：
            1.不贴合 padding border
            2.不使用margin 使用padding
            3.让父元素成为一个bfc容器
                bfc叫做格式化上下文容器
        */

        .parent{
            width: 300px;
            height: 300px;
            border-top: 1px solid transparent;
            background: blueviolet;
        }
        .son{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <!-- 垂直布局有两种情况 -->
    <!-- 兄弟布局 -->
    <div class="brother1">

    </div>
    <div class="brother2">

    </div>

    <!-- 父子级垂直布局 -->
    <div class="parent">
        <div class="son">

        </div>
    </div>
</body>
</html>